<template>
	<view class="table">
		<image src="../../static/table.png" mode=""></image>
		:{{store.table}}
	</view>
	<view class="box">
		<view class="bar">
			<view @click="changeList(item.classId,index)" :class="itemIndex==index?'changeBar':'barItem'" v-for="(item,index) in classList" :key="item.classId">
				<a href="javaScript:void(0)">{{item.className}}</a>
			</view>
		</view>
		<view>
			<scroll-view class="itemList" scroll-y="true" >
				<view v-for="(item,index) in itemList" class="item" :key="item.foodId">
					<image :src="item.foodImgUrl"></image>
					<view class="item_R">
						<span>{{item.foodDec}}</span>
						<view class="item_B">
							<span style="color:#e93c25;">￥{{item.foodPrice}}</span>
							<view class="edit">
								<button @click="countDown(item)">-</button>
								<span>{{item.count}}</span>
								<button @click="countAdd(item)">+</button>
							</view>
						</view>
					</view>
				</view>
				<view class="item"></view>
			</scroll-view>
		</view>
		
		<view class="carBox">
			<view style="position: relative;">
				<image src="../../static/buyCar.png"></image>
				<span class="count">{{car.totalCount}}</span>
			</view>
			<span class="price">￥{{car.totalPrice}}</span>
			<button @click="addOrder">选好了</button>
		</view>
	</view>
</template>

<script setup>
import * as API from '../../api/index.js'
import { reactive,ref,computed} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import Store from "../../store/index.js"
const store = Store()
let classList = reactive([])
//总的菜单列表
let foodList = reactive([])
//当前类别的菜单列表
let itemList = reactive([])
//当前类别坐标 默认为第一个
let itemIndex = ref(0)
//购物车信息
let car = reactive({
	orderId:'',
	list:[],
	totalPrice:0,
	totalCount:0
})
onLoad(()=>{
	console.log('首页加载了')
	API.getClassList().then((res)=>{
		classList.push(...res.data.classList)
		API.getFoodList().then((res)=>{
			foodList.push(...res.data.foodList)
			foodList.forEach((item,index)=>{
				item.count = 0
			})
			itemList.push(...foodList.filter((item,index)=>{
				return item.classId == classList[0].classId
			}))
		})
	})
	
})
//点击改变菜单列表
function changeList(classId,index){
	itemIndex.value = index
	itemList = foodList.filter((item,index)=>{
		return item.classId == classId
	})
}
//选择商品数量减少
function countDown(obj){
	foodList.forEach((item,index)=>{
		if(obj.foodId==item.foodId&&item.count>0){
			// totalPrice.value = totalPrice.value-item.foodPrice
			car.totalPrice = car.totalPrice-item.foodPrice
			item.count--
			obj.count = item.count
			if(obj.count==0){
				car.totalCount--
				//这里有bug
				let Index = 0
				car.list.forEach((item,index)=>{
					if(obj.foodId==item.foodId){
						Index = index
					}
				})
				car.list.splice(Index,1)
				// car.list.push(...car.list.filter((item)=>{
				// 	return item.foodId != obj.foodId
				// }))
				// store.deleteCarList(obj.foodId)
			}
		}
	})
}
//选择商品数量增加
function countAdd(obj){
	foodList.forEach((item,index)=>{
		if(obj.foodId==item.foodId){
			// totalPrice.value = totalPrice.value+item.foodPrice
			car.totalPrice = car.totalPrice+item.foodPrice
			item.count++
			obj.count = item.count
			if(obj.count == 1){
				// store.addCarList(obj)
				// carList.push(obj)
				car.totalCount++
				car.list.push(obj)
			}
		}
	})
}
//选好商品添加订单
function addOrder(){
	if(store.isLogin==true){
		for(let i=0;i<10;i++){
			car.orderId =car.orderId+`${Math.floor(Math.random()*10)}`
		}
		let Car = JSON.stringify(car)
		Car = JSON.parse(Car)
		store.addCar(Car)
		wx.showToast({
		  title: '添加成功',
		  icon: 'success',
		  duration: 1500
		})
		car.orderId = ''
		car.list =[]
		car.totalCount =0
		car.totalPrice =0
		foodList.forEach((item)=>{
			item.count =0
		})
	}else{
		uni.showToast({
			title:"请先登录",
			icon:'error',
			duration:1500
		})
	}
	
	// store.setTatolPrice(totalPrice.value)
	
}
</script>

<style lang="less">
	.table{
		margin-left: 10px;
		height: 20px;
		display: flex;
		align-items: center;
		font-size: 16px;
		image{
			width: 16px;
			height: 16px;
		}
	}
	.box{
		width: 100vw;
		height: 100vh;
		margin-top: 5px;
		display: flex;
		.bar{
			width: 26vw;
			height: 100vh;
			overflow: hidden;
			color: black;
			background-color: #e9e8e7;
			.barItem{
				width: 100%;
				height: 48px;
				line-height: 48px;
				font-size: 12px;
				text-align: center;
				background-color: #e9e8e7;
			}
			.changeBar{
				width: 100%;
				height: 48px;
				line-height: 48px;
				border-bottom: 1px solid;
				font-size: 12px;
				text-align: center;
				color: black;
				background-color: white;
			}
		}
		
		.itemList{
			width: 74vw;
			height: 100vh;
			overflow: hidden;
			.item{
				width:100%;
				height: 80px;
				display: flex;
				align-items: center;
				image{
					width: 24vw;
					height: 70px;
					border-radius: 4px;
				}
				.item_R{
					width: 50vw;
					height: 70px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.item_B{
						width: 50vw;
						display: flex;
						justify-content: space-between;
						.edit{
							display: flex;
							button{
								width: 20px;
								height: 20px;
								font-size: 20px;
								line-height: 20px;
							}
						}
					}
				}
			}
		}
		
		.carBox{
			width:100vw;
			height: 50px;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #e9e8e7;
			image{
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}
			.count{
				font-size: 18px;
				padding-left: 4px;
				padding-right: 4px;
				background-color: #faa134;
				color: white;
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: 0;
			}
			.price{
				color: #faa134;
				font-size: 20px;
			}
			button{
				font-size: 14px;
				margin-right: 10px;
				background-color: #faa134;
				color: aliceblue;
			}
		}
	}
</style>